<template>
  <div class="app-container">
    <el-card>
      <list
        :fields="fields"
        @add="add"
        @edit="edit"
        @plant="plant"
        @soil="soil"
        @device="device"
        @del="del"
      />
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      title="设置种植信息"
      :visible.sync="cropDialogVisible"
      width="76%"
    >
      <plant
        :field-id="formData.id"
        :form-data="formData"
        @cropSubmit="cropSubmit"
      />
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      title="设置土壤信息"
      :visible.sync="soilDialogVisible"
      width="60%"
    >
      <soil
        :form-data="formData"
        @soilSubmit="soilSubmit"
      />
    </el-dialog>
    <device ref="device" :field="field" @deviceSubmit="deviceSubmit" />
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import List from './component/list'
import MainForm from './component/main-form'
import Soil from './component/soil'
import Plant from '../plant/index'
import Device from './component/device'
import CommonMixin from '@/mixin/CommonMixin'
import { getAll, addOne, updateOne } from '@/api/field'
import { mapGetters } from 'vuex'
export default {
  components: {
    List,
    MainForm,
    Soil,
    Device,
    Plant
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      fields: [],
      cropDialogVisible: false,
      soilDialogVisible: false,
      crop_id: '',
      soil_id: '',
      field_id: '',
      field: {}
    }
  },
  computed: {
    ...mapGetters(['project'])
  },
  methods: {
    getList() {
      getAll({ project_id: this.project.id }).then(res => {
        this.fields = res.data.data
      })
    },
    async updateOne(formData) {
      const { msg } = await updateOne(formData.id, formData)
      this.$message.success(msg)
      this.dialogVisible = false
    },
    async addOne(formData) {
      formData.project_id = this.project.id
      await addOne(formData)
      this.getList()
    },
    getOne(row) {
      this.formData = row
      this.dialogVisible = true
    },
    edit(row) {
      console.log(row)
      this.formData = row
      this.dialogVisible = true
    },
    plant(row) {
      this.formData = row
      this.cropDialogVisible = true
    },
    cropSubmit(formData) {
      console.log(formData)
    },
    soil(row) {
      this.formData = row
      this.soilDialogVisible = true
    },
    soilSubmit(formData, field_id) {
      updateOne(field_id, formData).then((res) => {
        this.$message.success(res.msg)
        this.soilDialogVisible = false
        this.getList()
      })
    },
    device(row) {
      this.field_id = row.id
      this.field = row
      this.$refs.device.show()
    },
    deviceSubmit(formData) {
      updateOne(this.field_id, formData).then((res) => {
        this.$message.success(res.msg)
        this.$refs.device.hide()
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
